<template>
  <transition name="fade" mode="out-in">
    <div class="sale">
      <van-nav-bar
        title="业务员管理"
        left-arrow
        @click-left="onClickLeft"
        @click-right="onClickRight"
      >
        <img src="@/assets/icon_daa.png" slot="right" class="nav-right">
      </van-nav-bar>
      <van-tabs v-model="active" :line-width="20" class="sale-tab">
        <p class="search-btn" @click="jumpTo('/search-salesman')">搜索</p>
        <van-tab title="全部">
          <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
            <div class="tab-list">
              <van-list
                v-model="loading"
                :finished="finished"
                finished-text="没有更多了"
                @load="onLoad"
              >
                <div
                  v-for="item in list"
                  :key="item"
                  class="list-item"
                  @click="jumpTo('/salesman-detail')"
                >
                  <div class="list-title">
                    <img src="@/assets/index/icon_salesman.png" style="border-radius: 50%;width: 36px;margin-right: 10px;">
                    <div class="name">
                      苏桂英
                    </div>
                  </div>
                  <div class="list-code">
                    TJM10101
                  </div>
                </div>
              </van-list>
            </div>
          </van-pull-refresh>
        </van-tab>
        <van-tab title="待审核">
          <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
            <div class="tab-list">
              <van-list
                v-model="loading"
                :finished="finished"
                finished-text="没有更多了"
                @load="onLoad"
              >
                <div
                  v-for="item in list"
                  :key="item"
                  class="list-item"
                  @click="jumpTo('/salesman-detail')"
                >
                  <div class="list-title">
                    <img src="@/assets/index/icon_salesman.png" style="border-radius: 50%;width: 36px;margin-right: 10px;">
                    <div class="name">
                      苏桂英
                    </div>
                  </div>
                  <div class="list-code">
                    TJM10101
                  </div>
                </div>
              </van-list>
            </div>
          </van-pull-refresh>
        </van-tab>
        <van-tab title="已审核">
          <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
            <div class="tab-list">
              <van-list
                v-model="loading"
                :finished="finished"
                finished-text="没有更多了"
                @load="onLoad"
              >
                <div
                  v-for="item in list"
                  :key="item"
                  class="list-item"
                  @click="jumpTo('/salesman-detail')"
                >
                  <div class="list-title">
                    <img src="@/assets/index/icon_salesman.png" style="border-radius: 50%;width: 36px;margin-right: 10px;">
                    <div class="name">
                      苏桂英
                    </div>
                  </div>
                  <div class="list-code">
                    TJM10101
                  </div>
                </div>
              </van-list>
            </div>
          </van-pull-refresh>
        </van-tab>
      </van-tabs>
    </div>
  </transition>
</template>

<script>
import { Button, NavBar, Tab, Tabs, List, PullRefresh, Toast } from 'vant';
export default {
  components: {
    [Button.name]: Button,
    [NavBar.name]: NavBar,
    [Tab.name]: Tab,
    [Tabs.name]: Tabs,
    [List.name]: List,
    [PullRefresh.name]: PullRefresh,
    [Toast.name]: Toast,
  },
  data () {
    return {
      isLoading: false,
      active: 0,
      list: [],
      loading: false,
      finished: false
    }
  },
  mounted() {

  },
  methods: {
    onClickLeft() {
      this.$router.push('/index')
    },
    onClickRight() {
      // 点击增加按钮
      this.$router.push('/salesman-add')
    },
    jumpTo(url) {
      this.$router.push(url)
    },
    onLoad() {
      // 异步更新数据
      setTimeout(() => {
        for (let i = 0; i < 10; i++) {
          this.list.push(this.list.length + 1)
        }
        // 加载状态结束
        this.loading = false

        // 数据全部加载完成
        if (this.list.length >= 40) {
          this.finished = true
        }
      }, 500)
    },
    onRefresh() {
      // 下拉刷新
      setTimeout(() => {
        Toast.success({
          message: '刷新成功',
          duration: 1000
        })
        this.isLoading = false
        // 初始化数据
        this.list = []
        this.isNoData = false
        for (let i = 0; i < 10; i++) {
          this.list.push(this.list.length + 1)
        }
        // 加载状态结束
        this.loading = false
        // 数据全部加载完成
        if (this.list.length >= 40) {
          this.finished = true
        }
      }, 500)
    },
  },
}
</script>

<style scoped>
.sale {
  height: 100vh;
  overflow: auto;
  background-color: #F3F3F3;
  color: #38393A;
}
.nav-right {
  position: relative;
  top: 5px;
  width: 21px;
  height: 21px;
}
.search-btn {
  position: absolute;
  right: 20px;
  top: 0;
  font-size: 14px;
  line-height: 44px;
  color: #3687FF;
  z-index: 999;
}
.tab-list {
  margin-top: 8px;
  background-color: #fff;
}
.list-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
}
.list-title {
  display: flex;
  flex-direction: row;
  align-items: center;
}
</style>
